import ReactECharts from "echarts-for-react";
import {SVGRenderer} from "echarts/renderers";
import * as echarts from "echarts/core";
import {useEffect, useState} from "react";
import {TjdBigProject, TjdLeaders} from "@/services/Province/Dashboard";

echarts.use(SVGRenderer);

export default (props) => {

  const title = props.title ? props.title : "title"
  const [reload, setReload] = useState(false)
  const [options, setOptions] = useState({})
  const [height, setHeight] = useState(710)
  // useEffect(() => {
  //   TjdLeaders().then(res => {
  //     if (res.status === 0) {
  //       let o_data = []
  //       let o_value = []
  //       for (let i = 0; i < res.data.length; i++) {
  //         o_data.push(res.data[i].dis_name)
  //         o_value.push(res.data[i].rc_num)
  //       }
  //       o_data.reverse()
  //       o_value.reverse()
  //       setOptions({
  //         // color: '#00e600',
  //
  //         title: [
  //           {
  //             left: 'center',
  //             text: title
  //           }
  //         ],
  //         tooltip: {
  //
  //         },
  //         // legend: {},
  //         grid: {
  //           left: '3%',
  //           right: '4%',
  //           bottom: '3%',
  //           containLabel: true
  //         },
  //         xAxis: {
  //           type: 'value',
  //         },
  //         yAxis: {
  //           type: 'category',
  //           data: o_data    },
  //         series: [
  //           {
  //             // name: 'Direct',
  //             type: 'bar',
  //             stack: 'total',
  //             label: {
  //               show: true
  //             },
  //             emphasis: {
  //               focus: 'series'
  //             },
  //             data: o_value
  //           }
  //         ]
  //       })
  //       setHeight(((710 - 58) / 11) * o_data.length  + 58> 710 ? 710 : ((710 - 58) / 11) * o_data.length  + 58)
  //     }
  //   })
  // }, [reload])

  useEffect(() =>{
    const data = props.data ? props.data : []
    let o_data = []
    let o_value = []
    for (let i = 0; i < data.length; i++) {
      o_data.push(data[i].dis_name)
      o_value.push(data[i].rc_num)
    }
    o_data.reverse()
    o_value.reverse()
    setOptions({
      // color: '#00e600',

      title: [
        {
          left: 'center',
          text: title
        }
      ],
      tooltip: {

      },
      // legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'category',
        data: o_data    },
      series: [
        {
          // name: 'Direct',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: o_value
        }
      ]
    })
    setHeight(((710 - 58) / 11) * o_data.length  + 58> 710 ? 710 : ((710 - 58) / 11) * o_data.length  + 58)
  }, [props.data])


  return <ReactECharts style={{width: 700, height: height}} option={options} />
}
